<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video style-1</title>
    <link rel="stylesheet" href="../../model/jsFn.css">
    <link rel="stylesheet" href="../../model/element.css">
</head>
<body>
<div class="catalog">
    <h2>目录</h2>
    <ul>
        <li>
            <p><a href="#element">< video style="1" ></a></p>
        </li>
        <li>
            <p><a href="#attribute">属性</a></p>
            <ul>
                <li><p><a href="#example">实例</a></p></li>
                <li><p><a href="#optional">可选属性</a></p></li>
                <li><p><a href="#note">提示和注释</a></p></li>
                <li><p><a href="#sketch">效果图</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#jsFn">js函数</a></p>
            <ul>
                <li><p><a href="#jsFn_set">set</a></p></li>
                <li><p><a href="#jsFn_setFreeTime">setFreeTime</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#childElement">子标签</a></p>
            <ul>
                <li><p><a href="#childElement_title">title</a></p></li>
                <li><p><a href="#childElement_collection">collection</a></p></li>
            </ul>
        </li>
    </ul>
</div>
<!--标签-->
<div id="element">
    <h2>video style-1</h2>
    <div>简介:</div>
    <p>用于播放视频</p>
</div>
<!--属性-->
<div id="attribute">
    <h2>属性</h2>
    <div style="margin-left: 25px" id="example">
        <h3>实例:</h3>
        <xmp>
            <video id="video" val="document.arguments.data.videoUrl">
                <title background="#000000" height="48"/>
                <collection click="
                    getAgent(document.arguments.naive).invoke('lover').then((res)=>{
                        if(res.isLover==true){
                            alert('收藏成功');
                        }else{
                            alert('已取消收藏');
                        }
                    });" />
            </video>
        </xmp>
    </div>
    <div id="optional">
        <h3>可选属性:</h3>
        <table >
            <tbody>
                <tr>
                    <th>属性</th>
                    <th>值</th>
                    <th>描述</th>
                </tr>
                <tr>
                    <td>url</td>
                    <td>string</td>
                    <td>视频地址</td>
                </tr>
                <tr>
                    <td>val</td>
                    <td>string</td>
                    <td>JS代码字符串，执行后返回一个视频地址</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="note">
        <h3>提示和注释:</h3>
        <p>默认手机横放时全屏</p>
        <p></p>
    </div>
    <div id="sketch">
        <h3>效果图:</h3>
        <img src="img/video_style1.png" alt="">
    </div>
</div>
<div id="jsFn">
    <h2>js方法</h2>
    <div id="jsFn_set" class="jsFnModel">
        <h3>set:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>video.set(args) ->video;</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>指定特定的标签,给其赋值,包括标题、收藏</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表</h3>
            <ul>
                <li>
                    <p>args</p>
                    <p>&nbsp;object&nbsp;</p>
                    <p>
                        {title:{p:data.title,font:"18,#ffffff"}},collection:{img:"xxx.jpg",click:"alter("收藏");"}
                        <br/>
                        title:设置视频标题，title.p:标题文本；title.font:文本字体大小与颜色；
                        <br/>
                        collection:设置按钮，collection.img:按钮图片；collection.click:按钮事件；
                    </p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值</h3>
            <p>vodio</p>
            <p>返回video本身</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                < video id="video" >
                    < title background="#000000" height="48"/>
                    < collection/>
                < /video>
                document.$('video').set({title:{p:"修改后的标题",font:"18,#ffffff"}},collection:{img:"xxx.jpg",click:"alter("收藏");"});
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
    <div id="jsFn_setFreeTime" class="jsFnModel">
        <h3>setFreeTime:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>video.setFreeTime(time) ->video;</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>指定特定的标签,给其赋值,包括标题、收藏</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表</h3>
            <ul>
                <li>
                    <p>time</p>
                    <p>&nbsp;int&nbsp;</p>
                    <p>
                        设置免费播放时间，单位是秒
                    </p>
                </li>
            </ul>
        </div>
        <div class="res">
            <h3>返回值</h3>
            <p>vodio</p>
            <p>返回video本身</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                < video id="video" >
                    < title background="#000000" height="48"/>
                    < collection/>
                < /video>
                document.$('video').setFreeTime(120）;
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
</div>
<div id="childElement">
    <h2>子标签</h2>
    <div id="childElement_title">
        <h3>title</h3>
        <p>视频标题,用法和p标签类似</p>
    </div>
    <div id="childElement_collection">
        <h3>collection</h3>
        <p>收藏按钮，可以添加图片和点击事件</p>
    </div>
</div>
<div class="author">
    <p>by-沛华</p>
</div>
</body>
</html>